<template>
  <div class="patient-edit-page">
    <h1>患者编辑</h1>
    <div class="patient-info">
      <div>
        患者姓名：{{ patient.name }}　
        病历号：{{ patient.medicalId }}　
        性别：{{ patient.gender }}　
        身份证号：{{ patient.idCard }}
      </div>
      <div style="margin-top: 10px;">
        病情描述：{{ patient.description }}
      </div>
    </div>
    <div class="ward-select">
      <label>病区：</label>
      <select v-model="selectedWard">
        <option v-for="ward in wards" :key="ward" :value="ward">{{ ward }}</option>
      </select>
      <el-button type="primary" style="margin-left: 40px;" @click="save">保存</el-button>
    </div>

    <h2 style="margin-top: 40px;">床位分配：</h2>
    <div class="bed-assign">
      <div v-for="(room, idx) in pagedRooms" :key="room.id" class="room-row">
        <div class="room-label">病房{{ idx + 1 + (currentPage-1)*roomsPerPage }}:</div>
        <div class="beds">
          <div
            v-for="bed in room.beds"
            :key="bed.id"
            :class="['bed-btn', { assigned: bed.assignedTo === patient.name }]"
            @click="handleBedClick(bed)"
          >
            {{ bed.label }}<span v-if="bed.assignedTo">（{{ bed.assignedTo }}）</span>
          </div>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="rooms.length"
        :page-size="roomsPerPage"
        v-model:current-page="currentPage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const patient = ref({
  name: '张三',
  medicalId: 'H2304056432',
  gender: '男',
  idCard: '41130989098080808080909808',
  description: '阿萨法大声道发生的发生大发是打发'
});

const wards = ['1病区', '2病区', '3病区'];
const selectedWard = ref('1病区');

// 模拟病房和床位数据
const rooms = ref([
  { id: 1, beds: [
    { id: 1, label: '病床1', assignedTo: '张三' },
    { id: 2, label: '病床2', assignedTo: '张三' },
    { id: 3, label: '病床3', assignedTo: '张三' },
    { id: 4, label: '病床4', assignedTo: '张三' },
  ]},
  { id: 2, beds: [
    { id: 5, label: '病床5', assignedTo: '张三' },
    { id: 6, label: '病床6', assignedTo: '' },
    { id: 7, label: '病床7', assignedTo: '张三' },
    { id: 8, label: '病床8', assignedTo: '张三' },
  ]},
  { id: 3, beds: [
    { id: 9, label: '病床9', assignedTo: '张三' },
    { id: 10, label: '病床10', assignedTo: '张三' },
    { id: 11, label: '病床11', assignedTo: '' },
    { id: 12, label: '病床12', assignedTo: '' },
  ]},
  // 可继续添加更多病房
]);

const roomsPerPage = 3;
const currentPage = ref(1);

const pagedRooms = computed(() => {
  const start = (currentPage.value - 1) * roomsPerPage;
  return rooms.value.slice(start, start + roomsPerPage);
});

function save() {
  // 保存逻辑
  alert('保存成功');
}

const handleBedClick = (bed) => {
  // 跳转到护工消毒界面
  router.push({
    path: '/domain/nursemanage/PorterWorkDetail',
    query: {
      bedId: bed.id,
      bedLabel: bed.label
    }
  });
};
</script>

<style scoped>
.patient-edit-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0;
}
.patient-info {
  font-size: 18px;
  margin-bottom: 24px;
}
.ward-select {
  margin: 24px 0 0 0;
  font-size: 18px;
  display: flex;
  align-items: center;
}
.bed-assign {
  margin-top: 24px;
}
.room-row {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.room-label {
  width: 80px;
  font-size: 18px;
  font-weight: bold;
}
.beds {
  display: flex;
  gap: 32px;
}
.bed-btn {
  min-width: 120px;
  min-height: 48px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 6px;
  text-align: center;
  line-height: 48px;
  font-size: 18px;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: background 0.2s;
}
.bed-btn.assigned {
  background: #c6f59e;
  border-color: #8fd14f;
}
.pagination {
  margin-top: 24px;
  text-align: center;
}
</style>